
{extend name="layout"}
{block name="title"}续约套餐{/block}
{block name="body"}
<!--<form class="layui-form-type layui-form mainForm" data-auto="true" data-callback="submitCallback">-->
<div class="view-content">
	<div class="view-box">
		<div class="view-title">
			<span>选择套餐</span>
		</div>
		<div class="view-package">
			{foreach $list as $key=>$vo}
			<div class="p-detail">
				<p class="p-title"><span>{$vo.title|default=''}</span></p>

				{if $vo.type eq 1}
				<p class="p-text p-text-top">服务点数：{$vo.point|default='0'}点</p>
				{else/}
				<p class="p-text p-text-top" >服务人数：1~{$vo.people|default='0'}人</p>
				<p class="p-text">服务时间：{$vo.service_time|default='0'}</p>
				{/if}
				<p class="p-price">￥<span>{$vo.price|default='0.00'}</span></p>
				<input type="hidden" value="{$vo.id|default=''}">
			</div>
			{/foreach}
		</div>

	</div>

</div>

<div class="submit-box">
	<button class="btn-submit" onclick="goDetail()" >下一步</button>
	<!--		<input type="hidden" name="id"  value="{$info.id|default=''}" />-->
</div>
<!--</form>-->

{/block}

{block name="script"}
<script>
	$(function (){
		$(".view-package").on("click",'.p-detail',function (){
			$(this).addClass("on").siblings().removeClass("on")
		})
	})
	function goDetail(){
		var pid = $(".p-detail.on input").val()
		console.log(pid)
		if(!pid){
			$.msg.error("请选择套餐")
			return false;
		}
		window.location.href="{:url('mobile/index/details?id=')}?id=" + pid
	}


</script>
{/block}


{block name="style"}
<style>
	body,.main{
		background: #F9F9F9;
	}
	.main .view-content .view-box {
		margin-bottom: 1.467rem;
	}
	.view-package{
		margin-top: 0.4rem;
		color: #666666;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}


	.view-package .p-detail {
		background: #FFFFFF;
		width: 4.467rem;
		/*margin-right: 0.347rem;*/
		margin-bottom: 0.347rem;

		border-radius: 0.133rem;
		padding-bottom: 0.267rem;
		position: relative;
		overflow: hidden;
		/*border: 1px solid #BDBDBD;*/
	}
	.p-detail .p-title{
		position: relative;
		padding-left: 0.267rem;
		padding-right: 0.267rem;
		/*background: red;*/
	}
	.p-detail .p-title span{

		display: block;
		font-size: 0.4rem;
		color: #999999;
		line-height: 1.2rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;



	}
	.p-detail .p-title:after{
		position: absolute;
		content: "";
		bottom: -0.107rem;
		left: -0.267rem;
		border-bottom:dotted 6px #F9F9F9;
		background: transparent;
		width: 4.467rem;
	}
	.p-detail .p-text{
		padding-left: 0.267rem;
		padding-right: 0.267rem;
		text-align: center;
		font-size: 0.32rem;
		font-weight: 400;
		color: #999999;
		line-height: 0.453rem;
		margin-bottom: 0.24rem;
	}
	.p-detail .p-text-top{
		padding-top: 0.467rem;

	}

	.p-detail .p-price{
		padding-left: 0.267rem;
		padding-right: 0.267rem;
		margin-bottom: 0.267rem;
		text-align: center;
		font-size: 0.373rem;
		font-weight: bold;
		color: #61CAD7;
		line-height: 0.8rem;

	}
	.p-detail .p-price span{

		font-size: 0.667rem;
	}


	.view-package .p-detail.on {

		box-shadow: 0rem 0.107rem 0.36rem 0rem rgba(91, 192, 215, 0.21);

	}
	.view-package .p-detail.on:after{
		content: "";
		position: absolute;
		width: 0.933rem;
		height: 0.933rem;
		background-image: url('__ROOT__/static/mobile/images/package-hover-bg.png');
		background-repeat: no-repeat;
		background-size: contain;
		right: 0;
		bottom: 0;


	}
	.view-package .p-detail.on .p-title {
		background:#61CAD7 ;

	}
	.p-detail.on .p-title:after{

		border-bottom:dotted 6px #E6F3F5;

	}
	.view-package .p-detail.on .p-title span{

		color: #FFFFFF;
		font-weight: bold;


	}
	.view-package .p-detail.on .p-text{

		color: #333333;
		font-weight: bold;


	}

	.submit-box{
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 10rem;
		height: 1.467rem;
		box-shadow: 0rem -0.013rem 0.173rem 0rem rgba(162, 162, 162, 0.33);
	}
	.submit-box button{

		display: block;
		margin: 0 auto;
		margin-top: 0.173rem;
		box-sizing: border-box;
		width:7.467rem;
		height: 1.147rem;
		background: #43C6D6;
		border: none;
		border-radius: 0.587rem;

		font-size: 0.4rem;
		font-weight: 500;
		color: #FFFFFF;

		/*line-height: 0.8rem;*/
	}



</style>

{/block}


